<template>
  <div>
    <div class="list-head clearfix">
      <div class="song-list-cover fl posi-rel">
          <img :src=curList.coverImgUrl alt="" class='cover-img posi-ab'>
          <span class='disinblock mask posi-ab'></span>
      </div>
      <div class="song-list-detail fl ml50">
        <!-- 标题 -->
        <h4 class='fw500'>{{ curList.name }}</h4>
        <!-- 更新时间 -->
        <div class="head mb20 mt10">
            <span class="fs12 fc666">最近更新:</span>
            <span class='ml10 fs12 fc666'>{{ curList.updateTime | formatTime(curList.updateTime, false) }}</span>
            <span class="fs12 fc666 ml10">({{ updateFrequency }})</span>
        </div>
        <!-- 操作 -->
        <ul class='operation mt60 clearfix'>
          <li class='H100pc'>
            <!-- 播放 -->
            <a href="javascript:;" class='a-play disinblock posi-rel'>
            <i class='i-play posi-ab'></i>
            <span class='fs12 pl30 span-ply-font posi-ab'>播放</span>
            </a>
            <a href="javascript:;" class='a-collect disinblock' title='添加至播放列表'></a>
          </li>
          <li class='H100pc'>
              <!-- 收藏 -->
              <a href="javascript:;" class='collect-box fl fs10 r-btn'>
              <span class='collect-num fl pl30 background-btn'>({{ curList.subscribedCount }})</span>
              </a>
          </li>
          <li class='H100pc'>
              <!-- 分享 -->
              <a href="javascript:;" class='share-box fl fs10 r-btn'>
              <span class='share-num fl pl30 background-btn'>({{ curList.shareCount }})</span>
              </a>
          </li>
          <li class='H100pc'>
              <!-- 下载 -->
              <a href="javascript:;" class='download-box fl fs10 r-btn'>
              <span class='download-num fl pl30 background-btn'>下载</span>
              </a>
          </li>
          <li class='H100pc'>
              <!-- 留言 -->
              <a href="javascript:;" class='msg-box fl fs10 r-btn'>
              <span class='msg-num fl pl30 background-btn'>({{ curList.commentCount }})</span>
              </a>
          </li>
        </ul>
      </div>
    </div>
    <div class="list-bd mt30">
      <div class="songs-list-thead">
        <i class='fs20 songs-title'>歌曲列表</i>
        <i class='songs-num fs10 fcgray ml20'>{{ curList.tracks.length }}首歌</i>
        <i class="fr fs12">播放
            <i class="play-count fw800">{{ curList.playCount }}</i> 
        次</i>
      </div>
      <div class="songs-list-tbody fs12">
        <template>
          <el-table
            :data="curListSongs"
            :key='timeStamp'
            stripe
            style="width: 100%; font-size: 12px;">
            <!-- 序号 -->
            <el-table-column
              prop="songIndex"
              label=""
              width="40">
            </el-table-column>
            <!-- 播放图标 -->
            <el-table-column
              label=""
              width="50">
              <template slot-scope="scope">
                <span class="play-icon disinblock cursor-pointer" @click='playSong(scope.$index, scope.row)'></span>
              </template>
            </el-table-column>
            <!-- 歌曲标题 -->
            <el-table-column
              prop="name"
              label="歌曲标题"
              width="320">
              <template scope="scope">
                <span class="album-songs space-nowrap cursor-pointer" :title="scope.row.name">
                  {{ scope.row.name }}
                </span>
              </template>
            </el-table-column>
            <!-- 时长 -->
            <el-table-column
              prop="times"
              label="时长"
              width="120">
              <template scope="scope">
                <span class="times-column">
                <ul class='icon-list mt5' v-show='scope.row.howBtnOp'>
                    <li class='fl mr5 icon icon-add' title='添加'></li>
                    <li class='fl mr5 icon icon-collect' title='收藏'></li>
                    <li class='fl mr5 icon icon-share' title='分享'></li>
                    <li class='fl mr5 icon icon-download' title='下载'></li>
                  </ul>
                  <span class='times-content' v-show='!scope.row.howBtnOp'>
                    {{ scope.row.times }}
                  </span>
                </span>
              </template>
            </el-table-column>
            <!-- 歌手 -->
            <el-table-column
              prop="singer"
              label="歌手"
              width="">
              <template scope="scope">
                <span class="album-songs space-nowrap cursor-pointer" :title="scope.row.singer">
                  {{ scope.row.singer }}
                </span>
              </template>
            </el-table-column>
          </el-table>
        </template>
      </div>
    </div>
  </div>
  
</template>

<script>
import utils from '@/utils/common'
export default {
  name: 'leaderboardDetail',
  props: ['toplistArr', 'curTopList', 'curTopListSongs'],
  components: {
  },
  data() {
    return {
      toplistArrData: [], // 所有榜单
      curList: {
        tracks: []
      },
      curListSongs: [{
          songIndex: '',
          name: '',
          times: '',
          singer: '',
      }], // 当前榜单
      timeStamp: '',
      updateFrequency: ''
    }
  },
  watch: {
    toplistArr() {
      this.toplistArrData = this.toplistArr
    },
    curTopList() {
      this.curList = this.curTopList
      this.toplistArrData.forEach(item => {
        if (item.name == this.curList.name) {
          this.updateFrequency = item.updateFrequency
        }
      })
    },
    curTopListSongs() {
      console.log('当前榜单')
      this.curListSongs = this.curTopListSongs
      this.curListSongs.forEach((item, i) => {
        item.songIndex = i + 1
        item.times = utils.secondsFormat2(item.dt)
        let author = []
        item.ar.forEach(item => {
          author.push(item.name)
        })
        item.singer = author.join('/')
      })
    }
  },
  methods: {
    updateData() {
      this.timeStamp = new Date().valueOf()
    }
  }
}
</script>

<style lang='less' scoped>
.song-list-cover {
    width: 208px;
    height: 208px;
    .cover-img {
        width: 200px;
        height: 200px;
    }
    .mask {
        top: -4px;
        left: -5px;
        width: 100%;
        height: 100%;
        background: url('../../assets/coverall.png') no-repeat;
        background-position: 0px -1285px;
    }
}
.song-list-detail {
    width: 420px;
    .song-tit {
        width: 54px;
        height: 24px;
        background: url('../../assets/icon.png');
        background-position: 0 -243px;
        vertical-align: top;
    }
    .song-name {
        width: 350px;
        word-wrap: break-word;
        word-break: break-word;
        white-space: normal;
    }
}
.list-head {
  height: auto;
}
.operation {
  li {
    margin-right: 6px;
    float: left;
    margin-bottom: 20px;
    height: 30px;
    a {
      span {
        line-height: 30px;
      }
    }
  }
  .a-play {
    width: 66px;
    height: 100%;
    background: url('../../assets/button2.png');
    background-position: 242px -633px;
    &:hover {
      background-position: 242px -719px;
    }
    .i-play {
      width: 100%;
      height: 100%;
      line-height: 24px;
    }
    .span-ply-font {
      color: #fff;
      top: 50%;
      transform: translateY(-50%);
    }
  }
  .a-collect {
    width: 31px;
    height: 100%;
    background: url('../../assets/button2.png');
    background-position: 0 -1588px;
  }
  
  .r-btn, .background-btn {
    height: 100%;
    line-height: 28px;
    background: url('../../assets/button2.png');
  }
  .r-btn {
    padding-right: 4px;
    background-position: right -1020px;
  }
  .collect-num {
    background-position: 250px 3013px;
    &:hover {
      background-position: 250px 2927px;
    }
  }
  .share-num {
    background-position: 250px 2765px;
    &:hover {
      background-position: 250px 2722px;
    }
  }
  .download-num {
    background-position: 250px 5219px;
    &:hover {
      background-position: 250px 5175px;
    }
  }
  .msg-num {
    background-position: 250px 6515px;
    &:hover {
      background-position: 250px 6472px;
    }
  }
}
.list-bd {
    .songs-list-thead {
        height: 30px;
        line-height: 30px;
        padding-bottom: 5px;
        border-bottom: 2px solid #c20c0c;
        .play-count {
          color: #c20c0c;
        }
    }
}
</style>